<template>
  <a-drawer
    :width="600"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    title="品牌设置"
    class="form-drawer"
  >
    <div class="search-box">
      <a-tabs v-model="tabsIndex" :style="{ height: '50px' }" @tabClick="typeClick">
        <a-tab-pane v-for="(item, index) in tabList" :key="index" :tab="item.name"></a-tab-pane>
      </a-tabs>
    </div>
    <template v-if="tabsIndex == 0">
      <a-alert
        message="同步品牌下店铺以及店铺交易数据时公共参数入参"
        banner
        :style="{ margin: '14px 0' }"
      />
      <a-row :gutter="[8, 16]">
        <a-col :span="18">品牌号：{{ info.code }}</a-col>
      </a-row>
      <a-row :gutter="[8, 16]">
        <a-col :span="18">APPID：{{ info.appid }}</a-col>
      </a-row>
      <a-row :gutter="[8, 16]">
        <a-col :span="18">密钥：{{ info.secretKey }}</a-col>
      </a-row>
      <a-row :gutter="[8, 16]">
        <a-col :span="18" :push="4">
          <a-button size="small" type="primary" @click="copyHandler"> 一键复制 </a-button>
        </a-col>
      </a-row>
    </template>
    <template v-if="tabsIndex == 1">
      <a-alert message="设置品牌下店铺分账时划账扣款账户" banner :style="{ margin: '14px 0' }" />
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form-model"
      >
        <a-form-model-item
          label="品牌分账划账账户："
          prop="divideAccount"
          :rules="{ required: true, message: '品牌分账划账账户不能为空' }"
        >
          <a-input v-model="form.divideAccount" placeholder="请输入" allow-clear></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 18, offset: 4 }">
          <a-button type="primary" :loading="submitLoading" @click="onSubmit"> 确认 </a-button>
        </a-form-model-item>
      </a-form-model>
    </template>
  </a-drawer>
</template>

<script>
import { brandSetAccount } from '@/api/subject'
export default {
  name: '',

  data() {
    return {
      visible: false,
      tabList: [
        { name: '品牌密钥', value: 1 },
        { name: '品牌划账账户', value: 2 }
      ],
      form: {
        divideAccount: ''
      },
      alertMsg: '同步品牌下店铺以及店铺交易数据时公共参数入参',
      alertType: 'warning',
      tabsIndex: 0,
      info: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      submitLoading: false
    }
  },
  methods: {
    copyHandler() {
      var Url2 = `品牌号：${this.info.code}\nAPPID：${this.info.appid}\n密钥：${this.info.secretKey}`
      var oInput = document.createElement('textarea')
      oInput.value = Url2
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$notification['success']({
        message: '成功提示',
        description: '复制成功'
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          brandSetAccount(this.form).then((resp) => {
            this.submitLoading = false
            this.$notification['success']({
              message: '提示',
              description: '品牌划账账户设置成功'
            })
            this.onClose()
            this.$emit('on-submit')
          })
        }
      })
    },
    typeClick(index) {
      if (this.tabsIndex != index) {
        this.tabsIndex = index
      }
    },
    afterVisibleChange(visible) {
      if (!visible) {
        this.form = {
          divideAccount: ''
        }
        this.tabsIndex = 0
      }
    },
    onClose() {
      this.visible = false
    },
    open(record) {
      this.tabsIndex = 0
      this.info = record
      this.form.id = record.id
      this.form.divideAccount = record.divideAccount
      this.visible = true
    }
  },
  components: {}
}
</script>

<style></style>
